<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
		<title>Welcome to RevTube</title>
		<style><!--
			a{
			color:black;
			}
			body{
			background-image:url('/images/skyblue_gradient.png');
			background-repeat:repeat-x;
			}
			div#search{
			}
			div#favorites{
			background-color:rgb(250,250,250);
			border:1px solid black;
			}
			a{
			border:none;
			}
			-->
		</style>
	</head>
	<body>
		<center>
			<a href="/" style="border:none;"><img src = "/images/header.png" style="border:none;"></a>
		</center>
			
        <br>
		<div>		
			<div style="float:right">Logged in as: {{user}}</div>
			<br>	
			<div style="float:right"><a href = "{{logout}}">Log out</a>	</div>		
        </div>
		<br><br><br><br>
		<table width="100%">
			<tr>
				<td style="width:78%; vertical-align:top;">
					<center>
					<div id="search">
						<form name="input" action="/results" method="post">
							<input type="text" name="content" />
							<input type="submit" value="Search" />
						</form> 
					
						<table>							
								<!--Loop through the most viewed videos, display them in a grid. -->
								<center>
								{% for entry in c %}
									
									{% if forloop.counter0|divisibleby:3 %}
										<tr><td style="vertical-align:top; max-width:33%">
									{% else %}
										<td style="vertical-align:top; max-width:33%">
									{% endif %}
									<!VIDEO BOX>
									<br>
									<object width="200" height="144">
										<param name="movie" value={{entry|slice:"0:1"|first}}</param>
										<param name="allowFullScreen" value="true"></param>
										<param name="allowscriptaccess" value="always"></param>
										<embed src={{entry|slice:"0:1"|first}}
										  type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="150">
										</embed>
									</object>
									<br>
									<a href = "{{entry|slice:"0:1"|first}}">{{entry|slice:"1:2"|first}}</a><br>
									{% if forloop.counter0|divisibleby:3 %}
										</tr></td>
									{% else %}
										</td>
									{% endif %}
									
                                {% endfor %}
								</center> 
                                <br><br>
								<!-- Display Search Results -->
								<center>
								<td>
									{% for index in pageinfo %}
										{% if forloop.counter0|divisibleby:3 %}
											<tr><td style="vertical-align:top; padding:20px;">
										{% else %}
											<td style="vertical-align:top;  padding:20px;">
										{% endif %}
										<img src = "{{index|slice:"2:3"|first}}">
										<br><a href="VidPage?vid={{index|slice:"0:1"|first}}">{{index|slice:"1:2"|first}}</a>

										<br><br><br>
										{% if forloop.counter0|divisibleby:3 %}
											</tr></td>
										{% else %}
											</td>
										{% endif %}
									{% endfor %}	
								</td>
								</center>
						</table>
					</div>
					</center>
				</td>
				<td style="width:18%; vertical-align:top;">
					<br>
					<div id="favorites">
						<center>
							<strong>Favorites</strong><br>
							<!-- Loop through the Favorite Videos for the user and display them -->
							{% for entry in favs %}
								<center><br>
								<object width="100" height="75">							
									<param name="movie" value={{entry|slice:"1:2"|first}}</param>
									<param name="allowFullScreen" value="true"></param>
									<param name="allowScriptAccess" value="always"></param>
									<embed src={{entry|slice:"0:1"|first}}
									  type="application/x-shockwave-flash"
									  allowfullscreen="true"
									  allowscriptaccess="always"
									  width="100" height="75">
									</embed>
								</object><font color= "#666699"><a href="/delfavorites?vid={{entry|slice:"2:3"|first}}"> [X] </a><br>
									<a href="VidPage?vid={{entry|slice:"2:3"|first}}">{{entry|slice:"1:2"|first}}</a></font><br>
								</center>
							{% endfor %}
						</center>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>